<template>
	<gui-page ref="guiPage" :fullPage="true">
		<template v-slot:gBody>
			<view class="gui-flex1 gui-flex gui-column">
				<view style="padding:20rpx 30rpx;">
					<gui-switch-navigation :items="tabs" textAlign="center" :size="0" :margin="60"
						:currentIndex="currentIndex" activeDirection="center"
						@change="navchange"></gui-switch-navigation>
				</view>
				<view class="gui-bg-gray">
					<view class="gui-bg-white">
						<view class="news-list gui-flex gui-row gui-space-between gui-nowrap gui-border-b gui-margin-x"
							v-for="(item, idx) in artciles" :key="idx" @click="gotoDetail(item)">
							<view class="news-title">
								<gui-skeleton customStyle="border-radius:8rpx; height:80rpx;">
									<text class="gui-text gui-primary-text">{{item.title}}</text>
								</gui-skeleton>
								<view class="gui-flex gui-space-between gui-color-gray"
									style="font-size: 20rpx;margin: 40rpx 0;">
									<text class="gui-block gui-margin-x"><!-- {{item.compName}} -->柳钢集团</text>
									<!-- <text class="gui-block gui-margin-x">{{item.crt_time}}</text> -->
									<text class="gui-block gui-margin-x">{{item.look_num}}次浏览</text>
								</view>
							</view>
							<view class="news-img" style="margin: 20rpx 0;">
								<gui-skeleton customStyle="width:200rpx; height:100rpx;">
									<gui-image borderRadius="8rpx" :src="$uimg+item.fid" :width="200"></gui-image>
								</gui-skeleton>
							</view>
						</view>
					</view>
				</view>
				</swiper>
			</view>
		</template>
	</gui-page>
</template>
<script>
	import graceJS from "@/Grace6/js/grace.js"
	import artciles from '@/Grace6/demoData/article.js';
	export default {
		data() {
			return {
				
				navNum: 0,
				page: 0,
				pageSize: 10,
				cid: 0,
				// 新闻列表数据
				artciles: [],
				// 选项卡标签
				tabs: [],
				// 选中选项的 索引
				currentIndex: 0,
				cid: 0,
				firstTabId: 0,
				total: 0
			}
		},
		onLoad() {
			this.getNav()
			// this.cid=this.firstTabId
		},
		methods: {
			getNav() {
				let self = this;
				this.$boya.NGet("/lgzhsys/newsCategory", {}, (res) => {
					// console.log(res)
					self.tabs = res.data
					self.cid = res.data[0].id
					self.getnewsIngo()
					console.log("data", res.data)
				})
			},
			navchange: function(index) {
				let self = this;
				this.page = 1
				this.currentIndex = index;
				console.log(this.currentIndex)
				self.cid = self.tabs[index].id
				self.artciles = []
				this.getnewsIngo()
			},
			getnewsIngo() {
				let self = this;
				let data = {
					page_index: self.page,
					page_size: self.pageSize,
					category_id: self.cid
				}
				this.$boya.NGet("/lgzhsys/news", data, (res) => {
					self.total = res.data.total
					self.artciles = [...self.artciles, ...res.data.data]
				})
			},
			gotoDetail(d) {
				uni.navigateTo({
					url: "/pages/news/newsDetail?id=" + d.id
				})
			},
			onReachBottom() {
				let self = this
				if (self.page * self.pageSize >= self.total) {
					uni.showToast({
						title: "没有更多数据了",
						icon: "none",
						duration: 1000
					});
					setTimeout(() => {
						uni.hideLoading()
					}, 500)
				} else {
					if (self.page <= self.page - 1) {
						setTimeout(() => {
							uni.hideLoading()
						}, 500)
					} else {
						uni.showLoading({
							title: ""
						});
						self.page++
						this.getnewsIngo()
					}
					setTimeout(() => {
						uni.hideLoading()
					}, 500)
				}
			},
		},
		// mounted:function(){
		// 	setTimeout(()=>{
		// 		// 01. 获取页面主体高度
		// 		graceJS.getRefs('guiPage', this, 0, (ref)=>{
		// 			ref.getDomSize('guiPageBody', (e)=>{
		// 				this.mainHeight  = e.height - uni.upx2px(110);
		// 			});
		// 		});
		// 	}, 300);
		// }
	}
</script>
<style scoped>
	.demo-nav {
		padding: 15rpx 30rpx;
	}

	.demo-text {
		line-height: 200rpx;
		padding-bottom: 3000px;
	}

	.news-list {
		margin-top: 25rpx;
	}

	.news-img {
		width: 200rpx;
		margin-right: 30rpx;
		overflow: hidden;
	}

	.news-title {
		width: 200rpx;
		flex: 1;
	}
</style>